import * as React from "react";
import { List, 
  Datagrid, 
  TextField, 
  ReferenceField, 
  Create,
  SimpleForm,
  ReferenceInput,
  EditButton,
  SelectInput, TextInput,
  Edit,
  ListProps, } from 'react-admin';
//列表
export const PostList = (props : ListProps) => (
  <List filters={postFilters} {...props}>
      <Datagrid>
           <TextField source="id" />
          <ReferenceField source="userId" reference="users">
               <TextField source="name" />
          </ReferenceField>
          <TextField source="id" />
          <TextField source="title" />
          <TextField source="body" />
          <EditButton />
      </Datagrid>
  </List>
);
//修改
export const PostEdit = (props : any) => (
  <Edit title={<PostTitle />} {...props}>
      <SimpleForm>
        <TextInput disabled source="id" />
          <ReferenceInput source="userId" reference="users">
          <SelectInput optionText="name" />
          </ReferenceInput>
          <TextInput source="title" />
          <TextInput multiline source="body" />
      </SimpleForm>
  </Edit>
);
//创建
export const PostCreate = (props : any) => (
      <Create {...props}>
         <SimpleForm>
              <ReferenceInput source="userId" reference="users">
                  <SelectInput optionText="name" />
              </ReferenceInput>
              <TextInput source="title" />
              <TextInput multiline source="body" />
          </SimpleForm>
      </Create>
  );
  const PostTitle = ({ record } : any) => {
    return <span>Post {record ? `"${record.title}"` : ''}</span>;
};
//过滤器
const postFilters = [
  <TextInput source="q" label="Search" alwaysOn />,
  <ReferenceInput source="userId" label="User" reference="users" allowEmpty>
      <SelectInput optionText="name" />
  </ReferenceInput>,
];